<template>
  <div class="home">
    <header class="navbar">
      <div class="left">更新于 {{ state.dataTime }}</div>
      <div class="center">监控大屏综合管理平台</div>
      <div class="right">
        <div>
          <el-icon><Timer /></el-icon>{{ state.data }}
        </div>
        <div>
          <el-icon><Calendar /></el-icon>{{ state.time }}
        </div>
        <div>
          <el-icon><Place /></el-icon> 12~14°C
        </div>
      </div>
    </header>
    <section class="app-main">
      <div class="mian-top">
        <div class="left">
          <ItemWrap :title="'收益概览'" :height="'calc(100% - 47px)'">
            <div class="sygl">
              <div class="tongji">
                <div class="tongji-item">
                  <div class="top1">今日总收益</div>
                  <div class="top2">
                    <label>{{ state.todaySum }}</label
                    ><span>元</span>
                  </div>
                </div>
                <div class="tongji-item">
                  <div class="top1">累计总收益</div>
                  <div class="top2">
                    <label>{{ state.totalSum }}</label
                    ><span>万元</span>
                  </div>
                </div>
              </div>
              <div
                class="details"
                v-for="(item, index) in state.statisticsData"
                :key="index"
              >
                <div :class="['icon_bg', 'icon' + (index + 1)]"></div>
                <div class="content">
                  <div class="item1">{{ item.name }}</div>
                  <div class="item2">
                    <div class="top1">
                      <label>{{ item.today }}</label>
                      <span>元</span>
                    </div>
                    <div class="top2">今日总收益</div>
                    <div class="top3">
                      <span style="color: rgba(255, 255, 255, 0.8)">较昨日</span>
                      <span style="color: #00ff2b">↑ &nbsp;{{ item.rate }}%</span>
                    </div>
                  </div>
                  <div class="item2">
                    <div class="top1">
                      <label>{{ item.total }}</label>
                      <span>元</span>
                    </div>
                    <div class="top2">累计总收益</div>
                  </div>
                  <div class="item2">
                    <div class="top1">
                      <label>{{ item.seven }}</label>
                      <span>元</span>
                    </div>
                    <div class="top2">近七日收益</div>
                  </div>
                </div>
              </div>
            </div>
          </ItemWrap>
        </div>
        <div class="right">
          <div class="right-top">
            <ItemWrap :title="'站点概览'" :height="'calc(100% - 47px)'">
              <div class="content">
                <div class="item" v-for="(item, index) in state.zdData" :key="index">
                  <div class="top1">{{ item.name }}</div>
                  <div class="top2">
                    <label>{{ item.value }}</label>
                  </div>
                </div>
              </div>
            </ItemWrap>
          </div>
          <div class="right-bottom">
            <div class="right-bottom-left">
              <ItemWrap :title="'趋势'" :height="'calc(100% - 47px)'">
                <LineChart></LineChart>
              </ItemWrap>
            </div>
            <div class="right-bottom-right">
              <ItemWrap :title="'光伏概览'" :height="'calc(100% - 47px)'">
                <el-row :gutter="20">
                  <el-col :span="12" v-for="(item, index) in state.gfglData" :key="index">
                    <ItemCount
                      :bgURL="index < 2 ? gfgl1 : gfgl2"
                      :name="item.name"
                      :value="item.value"
                      :unit="item.unit"
                    ></ItemCount>
                  </el-col>
                </el-row>
              </ItemWrap>
            </div>
          </div>
        </div>
      </div>
      <div class="mian-bottom">
        <div class="mian-bottom-content1">
          <ItemWrap :title="'社会贡献'" :height="'calc(100% - 47px)'">
            <div class="item">
              <el-row :gutter="20">
                <el-col :span="10"><img :src="shgx1" alt="" /></el-col>
                <el-col :span="14" style="padding: 20px 0">
                  <div class="top1">等效减排</div>
                  <div class="top2"><label>294.05</label><span>吨</span></div>
                </el-col>
              </el-row>
            </div>
            <div class="item">
              <el-row :gutter="20">
                <el-col :span="10"><img :src="shgx2" alt="" /></el-col>
                <el-col :span="14" style="padding: 20px 0">
                  <div class="top1">等效植树</div>
                  <div class="top2"><label>396</label><span>棵</span></div>
                </el-col>
              </el-row>
            </div>
          </ItemWrap>
        </div>
        <div class="mian-bottom-content2">
          <ItemWrap :title="'储能概览'" :height="'calc(100% - 47px)'">
            <div class="cont">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="item-count">
                    <ItemCount
                      :bgURL="cngl1"
                      :name="'储能容量'"
                      :value="317"
                      :unit="'kWh'"
                    />
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="item-detail">
                    <div :class="['icon_bg', 'icon1']"></div>
                    <div class="content">
                      <div class="item1">充电</div>
                      <div class="item2">
                        <div class="top1">
                          <label>236.00</label>
                          <span>kwp</span>
                        </div>
                        <div class="top2">今日</div>
                      </div>
                      <div class="item2">
                        <div class="top1">
                          <label>11.48</label>
                          <span>万kwh</span>
                        </div>
                        <div class="top2">累计</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="cont">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="item-count">
                    <ItemCount
                      :bgURL="cngl2"
                      :name="'总数量'"
                      :value="13"
                      :unit="'台'"
                    />
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="item-detail">
                    <div :class="['icon_bg', 'icon2']"></div>
                    <div class="content">
                      <div class="item1">放电</div>
                      <div class="item2">
                        <div class="top1">
                          <label>236.00</label>
                          <span>kwp</span>
                        </div>
                        <div class="top2">今日</div>
                      </div>
                      <div class="item2">
                        <div class="top1">
                          <label>11.48</label>
                          <span>万kwh</span>
                        </div>
                        <div class="top2">累计</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </ItemWrap>
        </div>
        <div class="mian-bottom-content3">
          <ItemWrap :title="'充电站概览'" :height="'calc(100% - 47px)'">
            <div class="cont">
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="item-count">
                    <ItemCount
                      :bgURL="cdz"
                      :name="'总数量'"
                      :value="135"
                      :unit="'台'"
                    />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="item-count">
                    <ItemCount
                      :bgURL="cdz"
                      :name="'总数量'"
                      :value="157"
                      :unit="'台'"
                    />
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="item-count">
                    <ItemCount
                      :bgURL="cdz"
                      :name="'总数量'"
                      :value="189"
                      :unit="'台'"
                    />
                  </div>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <div class="item-detail">
                    <div :class="['icon_bg', 'icon1']"></div>
                    <div class="content">
                      <div class="item1">充电</div>
                      <div class="item2">
                        <div class="top1">
                          <label>236.00</label>
                          <span>kwp</span>
                        </div>
                        <div class="top2">今日</div>
                      </div>
                      <div class="item2">
                        <div class="top1">
                          <label>11.48</label>
                          <span>万kwh</span>
                        </div>
                        <div class="top2">累计</div>
                      </div>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </ItemWrap>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch, nextTick, onUnmounted, onMounted } from "vue";
import dayjs from "dayjs";
import ItemWrap from "./ItemWrap.vue";
import ItemCount from "./ItemCount.vue";
import LineChart from "./LineChart.vue";
import gfgl1 from "../assets/images/gfgl1.png";
import gfgl2 from "../assets/images/gfgl2.png";
import shgx1 from "../assets/images/shgx1.png";
import shgx2 from "../assets/images/shgx2.png";
import cngl1 from "../assets/images/cngl1.png";
import cngl2 from "../assets/images/cngl2.png";
import cdz from "../assets/images/cdz.png";

const state = reactive({
  dataTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  data: dayjs().format("YYYY-MM-DD"),
  time: dayjs().format("HH:mm:ss"),
  todaySum: 0,
  totalSum: 0,
  statisticsData: [
    {
      name: "储能",
      today: 6.53,
      total: 37.56,
      seven: 70.54,
      rate: 9.05,
    },
    {
      name: "光伏",
      today: 6.53,
      total: 37.56,
      seven: 70.54,
      rate: 8.09,
    },
    {
      name: "充电",
      today: 6.53,
      total: 37.56,
      seven: 70.54,
      rate: 12.15,
    },
  ],
  zdData: [
    {
      name: "今日上网(kwh)",
      value: 2531.53,
    },
    {
      name: "今日下网(kwh)",
      value: 1526.93,
    },
    {
      name: "站点总数(个)",
      value: 856,
    },
    {
      name: "累计上网(kwh)",
      value: 10203.13,
    },
    {
      name: "累计下网(kwh)",
      value: 18458.56,
    },
  ],
  gfglData: [
    {
      name: "装机容量",
      value: 317,
      unit: "kwh",
    },
    {
      name: "逆变器",
      value: 512,
      unit: "台",
    },
    {
      name: "今日发电",
      value: 814.72,
      unit: "kwh",
    },
    {
      name: "累计发电",
      value: 42.35,
      unit: "万kwh",
    },
  ],
});

const dataTimeRef = ref<any>(null);
const statisticsDataRef = ref<any>(null);

onMounted(() => {
  getCurrTime();
  switchData();
});

function getCurrTime() {
  dataTimeRef.value = setInterval(() => {
    state.time = dayjs().format("HH:mm:ss");
  }, 1000);
}
function switchData() {
  state.todaySum = state.totalSum = 0;
  statisticsDataRef.value = setInterval(() => {
    state.todaySum = state.totalSum = 0;
    for (let i = 0; i < state.statisticsData.length; i++) {
      const element = state.statisticsData[i];
      element.today = parseFloat((Math.random() * 100).toFixed(2));
      element.total = parseFloat((Math.random() * 100).toFixed(2));
      element.seven = parseFloat((Math.random() * 100 * 7).toFixed(2));
      element.rate = parseFloat((Math.random() * 12).toFixed(2));
      state.todaySum = parseFloat((state.todaySum + element.today).toFixed(2));
      state.totalSum = parseFloat((state.totalSum + element.total).toFixed(2));
    }
    for (let i = 0; i < state.gfglData.length; i++) {
      const element = state.gfglData[i];
      element.value = parseFloat((Math.random() * 100).toFixed(i === 1 ? 0 : 2)
      );
    }
  }, 10000);
}

onUnmounted(() => {
  clearInterval(dataTimeRef.value);
});
</script>

<style lang="scss" scoped>
.home {
  padding: 0;
  width: 100%;
  height: 100%;
  background-repeat: repeat;
  background-color: #001438;
  background-image: url(../assets/images/main-bg.svg);
  position: relative;
  overflow: hidden;
  .navbar {
    width: 100%;
    height: 80px;
    overflow: hidden;
    background: url(../assets/images/header-bg.png);
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    display: flex;
    justify-content: space-between;
    color: #fff;

    .center {
      font-size: 37px;
      font-weight: bold;
      background: linear-gradient(180deg, #00eeff 0%, #ffffff 99%);
      background-clip: text;
      color: transparent;
    }
    .left,
    .right {
      display: flex;
      justify-content: left;
      align-items: center;
      min-width: 400px;
      padding: 0 20px;
      font-size: 18px;
      .el-icon {
        margin-right: 10px;
      }
      > div {
        margin: 10px;
      }
    }
  }
  .app-main {
    width: 100%;
    height: calc(100% - 80px);
    color: #fff;
    .mian-top {
      width: 100%;
      height: 60%;
      display: flex;
      justify-content: space-between;
      .left {
        width: 30%;
        height: 100%;
        .sygl {
          padding: 10px;
          .tongji {
            display: flex;
            justify-content: space-between;
            &-item {
              padding: 25px 0 25px 120px;
              background: url(../assets/images/tongji.png);
              background-size: 70%;
              background-repeat: no-repeat;
              background-position: center;
              width: 35%;
              width: 35%;

              > div {
                margin: 5px 0;
              }
              .top1 {
                font-size: 14px;
                font-weight: bold;
                line-height: 14px;
                letter-spacing: 0px;
              }
              .top2 {
                label {
                  font-size: 20px;
                  font-weight: bold;
                  line-height: 22px;
                  letter-spacing: 0px;
                  font-variation-settings: "wght" 700;
                  background: linear-gradient(180deg, #00eeff 0%, #ffffff 99%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  background-clip: text;
                  text-fill-color: transparent;
                }
                span {
                  font-size: 12px;
                }
              }
            }
          }
          .details {
            display: flex;
            .content {
              height: 95px;
              background: url(../assets/images/contentbg.png);
              background-size: 100%;
              background-repeat: no-repeat;
              background-position: center;
              width: calc(100% - 105px);
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin: 10px 0;
              .item1 {
                font-size: 24px;
                font-weight: bold;
                line-height: 24px;
                letter-spacing: 0px;
                font-variation-settings: "wght" 700;
              }
              .item2 {
                > div {
                  margin: 5px 0;
                }
                .top1 {
                  label {
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 22px;
                    letter-spacing: 0px;

                    font-variation-settings: "wght" 700;
                    background: linear-gradient(180deg, #00eeff 0%, #ffffff 99%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                  }
                  span {
                    font-size: 12px;
                  }
                }
                .top2 {
                  font-size: 14px;
                  font-weight: bold;
                  line-height: 14px;
                  letter-spacing: 0px;
                }
                .top3 {
                  font-size: 10px;
                  font-weight: normal;
                  line-height: 10px;
                  letter-spacing: 0px;
                }
              }
            }
            .icon_bg {
              width: 105px;
              height: 105px;
              background-size: auto;
              background-repeat: no-repeat;
              background-position: center;
            }
            .icon1 {
              background-image: url(../assets/images/icon0.png);
            }
            .icon2 {
              background-image: url(../assets/images/icon1.png);
            }
            .icon3 {
              background-image: url(../assets/images/icon2.png);
            }
          }
        }
      }
      .right {
        width: 70%;
        height: 100%;
        &-top {
          width: 100%;
          height: 30%;
          .content {
            display: flex;
            justify-content: space-between;
            .item {
              background: url(../assets/images/zd2.png);
              background-repeat: no-repeat;
              background-position: left;
              padding: 20px 10px 20px 100px;
              margin-top: 10px;
              .top1 {
                font-size: 12px;
                font-weight: bold;
                letter-spacing: 0px;
                margin-bottom: 10px;
              }
              .top2 {
                label {
                  font-size: 20px;
                  font-weight: bold;
                  line-height: 24px;
                  letter-spacing: 0px;
                  font-variation-settings: "wght" 700;
                  background: linear-gradient(180deg, #00eeff 0%, #ffffff 99%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                  background-clip: text;
                }
                span {
                  font-size: 12px;
                }
              }
            }
          }
        }
        &-bottom {
          width: 100%;
          height: 70%;
          display: inline-flex;
          &-left {
            width: 70%;
          }
          &-right {
            width: 30%;
          }
        }
      }
    }
    .mian-bottom {
      width: 100%;
      height: 40%;
      display: flex;
      justify-content: space-between;
      &-content1 {
        width: 20%;

        .item {
          background-image: linear-gradient(
            270deg,
            rgba(7, 255, 181, 0) 0%,
            rgba(7, 255, 181, 0.38) 100%
          );
          margin: 10px 0 5px 0;
          background-repeat: no-repeat;
          background-position: left;
          padding: 22px 30px;
          .top1 {
            font-size: 14px;
            font-weight: bold;
            line-height: 14px;
            letter-spacing: 0px;
            margin-bottom: 10px;
          }
          .top2 {
            label {
              font-size: 20px;
              font-weight: bold;
              line-height: 22px;
              letter-spacing: 0px;
              font-variation-settings: "wght" 700;
              background: linear-gradient(180deg, #00eeff 0%, #ffffff 99%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
            }
            span {
              font-size: 12px;
            }
          }
        }
      }
      &-content2,
      &-content3 {
        width: 40%;
        .cont {
          padding: 0 20px;
          .item-count {
            background-color: rgba(0, 238, 255, 0.1);
          }
          .item-detail {
            display: flex;
            .content {
              height: 105px;
              background: url(../assets/images/contentbg.png);
              background-size: 100% 100px;
              background-repeat: no-repeat;
              background-position: center;
              width: calc(100% - 105px);
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin: 10px 0;
              .item1 {
                font-size: 24px;
                font-weight: bold;
                line-height: 24px;
                letter-spacing: 0px;
                font-variation-settings: "wght" 700;
              }
              .item2 {
                > div {
                  margin: 5px 0;
                }
                .top1 {
                  label {
                    font-size: 20px;
                    font-weight: bold;
                    line-height: 22px;
                    letter-spacing: 0px;

                    font-variation-settings: "wght" 700;
                    background: linear-gradient(180deg, #00eeff 0%, #ffffff 99%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                  }
                  span {
                    font-size: 12px;
                  }
                }
                .top2 {
                  font-size: 14px;
                  font-weight: bold;
                  line-height: 14px;
                  letter-spacing: 0px;
                }
                .top3 {
                  font-size: 10px;
                  font-weight: normal;
                  line-height: 10px;
                  letter-spacing: 0px;
                }
              }
            }
            .icon_bg {
              width: 105px;
              height: 105px;
              background-size: auto;
              background-repeat: no-repeat;
              background-position: center;
            }

            .icon1 {
              background-image: url(../assets/images/cd.png);
            }
            .icon2 {
              background-image: url(../assets/images/fd.png);
            }
          }
        }
      }
      // &-content3 {
      //   width: 40%;
      //   .cont {
      //     padding: 20px;
      //   }
      // }
    }
  }
}
</style>
